<template>
  <div v-loading="load">
    <div v-if="!error">
      <div class="body-box">
        <window-titls title="基本信息"></window-titls>
        <div class="club-info">
          <el-form label-position="left" label-width="80px" size="mini">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="Logo">
                  <img :src="club_info.Logo" class="child-cluib-logo" />
                </el-form-item>
                <el-form-item label="跑团ID">{{club_info.IdCode}}</el-form-item>
                <el-form-item label="跑团名称">{{club_info.Title}}</el-form-item>
                <el-form-item label="团长信息">{{club_info.Contacter}}({{club_info.Contact}})</el-form-item>
                <el-form-item
                  label="跑团地址"
                >{{club_info.Province}}{{club_info.City}}{{club_info.Address}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <div class="child-cluib-logo"></div>
                </el-form-item>
                <el-form-item label="认证状态">
                  <el-tag size="mini" v-if="club_info.cation_type == 0" type="info">未认证</el-tag>
                  <el-tag size="mini" v-if="club_info.cation_type == 1" type="success">个人认证</el-tag>
                  <el-tag size="mini" v-if="club_info.cation_type == 2" type="success">企业认证</el-tag>
                  <el-tag size="mini" v-if="club_info.cation_type == 3" type="success">组织认证</el-tag>
                </el-form-item>
                <el-form-item label="跑团会员">{{club_info.user_num}}人</el-form-item>
                <el-form-item label="发布活动">{{club_info.active_num}}个</el-form-item>
                <el-form-item label="创建时间">{{club_info.CreateTime}}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="body-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="会员列表" name="0"></el-tab-pane>
          <el-tab-pane label="活动列表" name="1"></el-tab-pane>
        </el-tabs>
        <!-- 会员列表 -->
        <div class="user-list" v-if="activeName == 0">
          <el-table size="mini" border :data="user_list.data">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="昵称" prop="MemberName"></el-table-column>
            <el-table-column label="手机号" prop="Phone"></el-table-column>
            <el-table-column label="入会时间" prop="CreateTime"></el-table-column>
            <el-table-column label="会员等级">
              <template slot-scope="item">
                <el-tag size="mini" type="danger" v-if="item.row.ClubRole == 9">团长</el-tag>
                <template v-else>
                  <el-tag size="mini" type="info" v-if="item.row.VipUser < 2">普通会员</el-tag>
                  <el-tag size="mini" type="success" v-if="item.row.VipUser == 2">高级会员</el-tag>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-box">
            <el-pagination
              background
              small
              :current-page="user_list.current_page"
              :page-size="user_list.per_page"
              layout="total, prev, pager, next, jumper"
              :total="user_list.total"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
        <!-- 活动列表 -->
        <div v-else>
          <active-list :handle="false" :list="active_list.data" :child="true"></active-list>
          <div class="page-box">
            <el-pagination
              background
              small
              :current-page="active_list.current_page"
              :page-size="active_list.per_page"
              layout="total, prev, pager, next, jumper"
              :total="active_list.total"
              @current-change="changePagea"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div class="body-box" v-else>
        非法操作
    </div>
  </div>
</template>

<script>
import windowTitls from "../../components/unit/title.vue";
import activeList from "../active/list-table.vue";

export default {
  components: { windowTitls, activeList },
  data() {
    return {
      id: this.$route.params.id,
      club_info: {},
      activeName: "0",
      user_list: {
        current_page: 1,
        data: []
      },
      active_list: {
        current_page: 1,
        data: []
      },
      load: true,
      error: false
    };
  },
  mounted() {
    this.getInfo();
    this.getUserList();
  },
  methods: {
    //获取活动列表
    getActiveList() {
      this.ajaxs("active/activeBaseList", {
        data: {
          page: this.active_list.current_page,
          id: this.id,
          limit: "",
          suspen: ""
        },
        success: res => {
          this.active_list = res.msg.list;
        }
      });
    },
    //活动分页
    changePagea(e) {
      this.active_list.current_page = e;
      this.getActiveList();
    },
    //切换tabs
    handleClick() {
      if (this.activeName == 1) {
        this.getActiveList();
      } else {
        this.getUserList();
      }
    },
    //会员列表分页
    changePage(e) {
      this.user_list.current_page = e;
    },
    //获取会员列表
    getUserList() {
      this.ajaxs("user/userList", {
        data: {
          page: this.user_list.current_page,
          sex: "",
          name: "",
          times: "",
          id: this.id,
          Checked : ''
        },
        success: res => {
          this.user_list = res.msg.list;
          console.log(res);
        }
      });
    },
    //获取跑团信息
    getInfo() {
      this.ajaxs("club/getClubInfo", {
        data: { id: this.id },
        success: res => {
          this.load = false;
          if (!res.code) this.error = true;
          this.club_info = res.msg;
        }
      });
    }
  }
};
</script>

<style>
.club-info {
  overflow: hidden;
  margin-top: 20px;
}
.club-info .el-form-item--mini .el-form-item__content,
.club-info .el-form-item--mini .el-form-item__label {
  line-height: 20px !important;
}
.club-info-item {
  float: left;
  width: 50%;
}
.child-cluib-logo {
  width: 50px;
  height: 50px;
  display: block;
}
</style>